<template>
	<el-dialog :title="title" :visible.sync="isVisible" :close-on-press-escape="false" :close-on-click-modal="false" :width="width" top="4vh">
		<el-form :model="editData" ref="form" :rules="rules" v-loading="loading">
			<el-form-item label="用户名" prop="username" label-width="65px"><el-input v-model="editData.username"></el-input></el-form-item>
			<el-form-item label="密码" prop="password" label-width="65px"><el-input v-model="editData.password"></el-input></el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="isVisible = false">取 消</el-button>
			<el-button type="primary" @click="submitForm()">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
export default {
	name: 'edit',
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		type: {
			type: String,
			default: 'add'
		},
		title: {
			type: String,
			default: ''
		},
		formData: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {
			width: this.initWidth(),
			loading: false,
			rules: {
				username: [
					{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}
				],
				password: [
					{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}
				]
			}
		};
	},
	computed: {
		isVisible: {
			get() {
				return this.visible;
			},
			set() {
				this.$emit('close');
			}
		},
		editData() {
			return this.formData;
		}
	},
	mounted() {
		window.onresize = () => {
			return (() => {
				this.width = this.initWidth();
			})();
		};
	},
	methods: {
		initWidth() {
			this.screenWidth = document.body.clientWidth;
			if (this.screenWidth < 991) {
				return '90%';
			} else if (this.screenWidth < 1400) {
				return '45%';
			} else {
				return '800px';
			}
		},
		submitForm() {
			this.$refs['form'].validate(valid => {
				if (valid) {
					let editData = this.editData;
					editData.id = editData._id;
					delete editData['_id']
					this.loading = true;
					uniCloud
						.callFunction({
							name: 'user',
							data: {
								...editData,
								delete_time: 0,
								url: editData.id ? 'update' : 'add'
							}
						})
						.then(res => {
							this.loading = false;
							this.isVisible = false;
							this.$message.success('操作成功');
							this.$emit('success');
						})
						.catch(res => {
							this.loading = false;
							this.$message.error(res.errMsg);
						});
				}
			});
		}
	}
};
</script>

<style lang="scss">
@import '@/static/css/editor-icon.css';
.iconfont {
	display: inline-block;
	padding: 8px 8px;
	width: 24px;
	height: 24px;
	cursor: pointer;
	font-size: 20px;
}

.toolbar {
	box-sizing: border-box;
	border-bottom: 0;
	font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
	margin-top: 5px;
}

.ql-container {
	box-sizing: border-box;
	padding: 10px 10px;
	width: 100%;
	min-height: 20vh;
	height: auto;
	background: #fff;
	font-size: 16px;
	line-height: 1.5;
}

.ql-active {
	color: #06c;
}

.article-box {
	height: 100%;
	padding: 10px;
	box-sizing: border-box;

	.btn-box {
		margin-bottom: 10px;

		.btn {
			margin-right: 10px;
		}
	}

	.el-pagination {
		margin-top: 20px;
	}
}

.image-box {
	position: relative;
	width: 120px;
	height: 120px;
	margin-left: 50px;

	.image {
		width: 120px;
		height: 120px;
		position: absolute;
		left: 0;
		top: 0;
	}

	.el-icon-delete-solid {
		color: red;
		position: absolute;
		bottom: 0;
		right: 0;
		font-size: 20px;
	}
}

.ql-editor {
	padding: 0;
}

.image-uploader-icon {
	border: 1px dashed #55aaff;
	font-size: 28px;
	color: #8c939d;
	width: 120px;
	height: 120px;
	line-height: 120px;
	text-align: center;
}
</style>
